<template>
  <CommonNavbar title="商品列表" />
  <div class="list-container">
    <!-- 排序栏 -->
    <div class="order-bar">
      <div
        @click="switchOrderStatus(0)"
        :class="['order', 'sale', { active: orderStatus.activeIndex === 0 }]"
      >
        销量
      </div>
      <div
        @click="switchOrderStatus(1)"
        :class="['order', 'price', { active: orderStatus.activeIndex === 1 }]"
      >
        价格
        <div
          :class="[
            'triangle',
            'up',
            { active: orderStatus.activeIndex === 1 && orderStatus.upDown === 0 },
          ]"
        ></div>
        <div
          :class="[
            'triangle',
            'down',
            { active: orderStatus.activeIndex === 1 && orderStatus.upDown === 1 },
          ]"
        ></div>
      </div>
      <div
        @click="switchOrderStatus(2)"
        :class="['order', 'new', { active: orderStatus.activeIndex === 2 }]"
      >
        新品
      </div>
    </div>
    <!-- /排序栏 -->
    <!-- 商品列表 -->
    <van-card
      v-for="item in items"
      :key="item.id"
      :price="item.minPrice"
      :title="item.name"
      :thumb="item.pic"
      @click="clickItem(item.id)"
    >
      <template #footer>
        <van-icon name="gouwuchetianjia" color="#ff623a" class-prefix="icon" size="20" />
      </template>
    </van-card>
    <!-- /商品列表 -->
  </div>
</template>

<script setup lang="ts" name="ItemLists">
import { ref, onMounted, reactive, computed } from "vue";
import CommonNavbar from "@/components/CommonNavbar.vue";
import type { Item } from "@/types/homeType";
import { getItems } from "@a/itemLists";
import { useRoute, useRouter } from "vue-router";
const route = useRoute();
const router = useRouter();
const clickItem = (id: number) => {
  router.push({
    path: "/detail",
    query: {
      id,
    },
  });
};
// 排序 高亮 状态
const orderStatus = reactive({
  activeIndex: 0, // 0 销量 1 价格 2 新品
  upDown: 1, // 0 升序 1 降序
});
const orderBy = computed(() => {
  let orderByStatus = "ordersDown";
  switch (orderStatus.activeIndex) {
    case 0:
      // 销量降序
      orderByStatus = "ordersDown";
      break;
    case 1:
      // 按照价格
      // 判断升序还是降序
      if (orderStatus.upDown === 0) {
        orderByStatus = "priceUp";
      } else {
        orderByStatus = "priceDown";
      }
      break;
    case 2:
      // 发布事件降序
      orderByStatus = "addedDown";
      break;
    default:
      break;
  }
  return orderByStatus;
});

// 点击排序切换 排序状态
const switchOrderStatus = (activeIndex: number) => {
  // activeIndex点击 要切换排序下标
  /* 
      判断现在要切换 排序下标 是不是 现在的排序下标
        1 是 切换升序和降序
        2 不是 切换这个 排序规则 且定义 默认升序和降序
  */
  if (orderStatus.activeIndex === activeIndex) {
    // 切换升序还是降序
    if (orderStatus.upDown === 0) {
      orderStatus.upDown = 1;
    } else {
      orderStatus.upDown = 0;
    }
  } else {
    // 切换排序 规则 并定义 该排序规则 升序降序的默认值
    orderStatus.activeIndex = activeIndex;
    switch (activeIndex) {
      case 0:
        // 从其他排序规则 切换到 销量上 升序降序默认值是 降序
        orderStatus.upDown = 1;
        break;
      case 1:
        // 从其他排序规则 切换到价格上 升序降序默认值是 升序
        orderStatus.upDown = 0;
        break;
      case 2:
        // 从其他排序规则 切换到发布时间上 升序降序默认值是 将序
        orderStatus.upDown = 1;
        break;
      default:
        break;
    }
  }

  fetchItems();
};
const items = ref<Item[]>([]);
const fetchItems = () => {
  getItems({
    k: route.query.key,
    orderBy: orderBy.value,
  }).then((res) => {
    if (res.data.code === 0) {
      items.value = res.data.data.result;
    }
  });
};

onMounted(() => {
  fetchItems();
});
</script>

<style scoped lang="scss">
.order-bar {
  height: 40px;
  background-color: #fafafa;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: space-around;
  .order {
    &.active {
      color: #ff623a;
    }
    position: relative;
    .triangle {
      width: 0;
      padding: 0;
      border: 5px solid transparent;
      position: absolute;
      right: -12px;
      &.up {
        border-bottom-color: #333;
        top: 1px;
        &.active {
          border-bottom-color: #ff623a;
        }
      }
      &.down {
        border-top-color: #333;
        top: 12px;
        &.active {
          border-top-color: #ff623a;
        }
      }
    }
  }
}
.list-container {
  padding-top: 46px;
}
</style>
